<template>
    <div>
        <search-title></search-title>
        <loading loadingStyle="height:500px" v-if="!user.userInfo"></loading>
        <div v-else>
            <section class="wrap recharge">
                <header class="rcaTitle">
                    <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="stretch" :lazy="stretch">
                        <el-tab-pane label="交易币充值" name="currencyRecharge">
                            <div class="rcaBox">
                                <p class="rcaUser">嗨！<span>{{user.userInfo.data.name}}</span> </p>
                                <p class="rcaBalance">当前账户余额: &nbsp<span>{{user.userInfo.data.coins}}</span>交易币&nbsp&nbsp（当前 <span class="openVip" @click="activeName='vipRecharge'">{{user.userInfo.data.is_vip?"VIP有效期至"+user.userInfo.data.vipduetime:"未开通VIP会员"}}</span> ）</p>
                                    <currency-recharge @quotaChange="quotaActual"></currency-recharge>
                                <div class="paymentNum">
                                    <span class="paymentText">应付金额：</span><span class="paymentNumMsg">￥{{quota}}</span>
                                </div>
                            <!-- <recharge-mode ></recharge-mode> -->
                                <div class="paymentMode">
                                    <span class="paymentText">支付方式：</span>
                                    <span class="WeChatBox" @click="rechargeMode('wxpay')">
                                        <img src="../../img/WeChat.png" alt="">
                                        <img v-if="miniActive=='wxpay'" class="rechargeActive" src="../../img/miniActive.png" alt=""> 
                                    </span>
                                    <span class="AlipayBox" @click="rechargeMode('alipay')">
                                        <img src="../../img/Alipay.png" alt="">
                                        <img v-if="miniActive=='alipay'" class="rechargeActive" src="../../img/miniActive.png" alt="">
                                    </span>
                                    
                                </div>
                                <div class="rechargeBtn">
                                    <button @click="ImmediateRecharge(0)" :disabled="rechargeBtn">立即充值</button>
                                </div>
                                <div>
                                    <p class="rcaExplain">
                                        充值说明:
                                    </p>
                                </div>
                                <ul class="explainBox">
                                    <li>交易币用来下载本站模型资源，永久有效、不可提现或转让；</li>
                                    <li>VIP特权：免费下载带VIP标识的素材；高清案例一键下载。</li>
                                    <li>充值之后发现未到账情况，请退出账号重新登录；</li>
                                    <li>充值800以上一律92折优惠；</li>
                                    <!-- <li>其他问题咨询邮箱：2359987423@qq.com 企业充值联系电话：400-119-1118；</li> -->
                                </ul>
                            </div>
                            
                        </el-tab-pane>
                        <el-tab-pane label="VIP充值" name="vipRecharge">
                            <div class="rcaBox">
                                <p class="rcaUser">嗨！<span>{{user.userInfo.data.name}}</span> </p>
                                <p class="rcaBalance">当前账户余额: &nbsp<span>{{user.userInfo.data.coins}}</span>交易币&nbsp&nbsp（当前 <span class="openVip" @click="activeName='vipRecharge'">{{user.userInfo.data.is_vip?"VIP有效期至"+user.userInfo.data.vipduetime:"未开通VIP会员"}}</span> ）</p>
                                    <vip-recharge @quotaChangeVip="quotaActualVip"></vip-recharge>
                                <div class="paymentNum">
                                    <span class="paymentText">应付金额：</span><span class="paymentNumMsg">￥{{quotaVip}}</span>
                                </div>
                                <!-- <recharge-mode></recharge-mode> -->
                                <div class="paymentMode">
                                    <span class="paymentText">支付方式：</span>
                                    <span class="WeChatBox" @click="rechargeMode('wxpay')">
                                        <img src="../../img/WeChat.png" alt="">
                                        <img v-if="miniActive=='wxpay'" class="rechargeActive" src="../../img/miniActive.png" alt=""> 
                                    </span>
                                    <span class="AlipayBox" @click="rechargeMode('alipay')">
                                        <img src="../../img/Alipay.png" alt="">
                                        <img v-if="miniActive=='alipay'" class="rechargeActive" src="../../img/miniActive.png" alt="">
                                    </span>
                                    
                                </div>
                                <div class="rechargeBtn">
                                    <button @click="ImmediateRecharge(1)" :disabled="rechargeBtn">立即充值</button>
                                </div>
                                <div>
                                    <p class="rcaExplain">
                                        充值说明:
                                    </p>
                                </div>
                                <ul class="explainBox">
                                    <li>交易币用来下载本站模型资源，永久有效、不可提现或转让；</li>
                                    <li>VIP特权：免费下载带VIP标识的素材；高清案例一键下载。</li>
                                    <li>充值之后发现未到账情况，请退出账号重新登录；</li>
                                    <li>充值800以上一律92折优惠；</li>
                                    <!-- <li>其他问题咨询邮箱：2359987423@qq.com 企业充值联系电话：400-119-1118；</li> -->
                                </ul>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </header>
        </section>
        <div class="rechargeMask" v-show="maskShow">
            <div class="rechargeMaskBox" :style="style">
                <div class="drag" @mousedown="move">
                        <span class="loginClose el-icon-close" @click="rechargeMaskClose()"></span>
                    </div>
                <header class="rechargeMaskTitle">支付金额：￥<span id="rechargeNum">0</span></header>
                <p class="rechargeMaskScanning">微信扫码支付</p>
                <div>
                    <div class="rechargeErweima">
                        <div id="qrcode">正在生成二维码，请稍后...</div>
                        <span class="erweimaInvalid" :class="{'erweimaMask':invalid}">
                            {{erweimaText}}
                            <button v-if="invalid" @click="refreshBtn">刷新</button>
                        </span>
                    </div>
                    <p class="erweimaCountdown" v-if="!invalid">二维码在{{erweimaNmu}}秒后失效</p>
                </div>
            </div>
        </div>
        </div>
        
    </div>
</template>
<script>
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
import loading from '../loading'
import QRCode from 'qrcodejs2'
export default {
    name : "Recharge",
    data(){
        return {
            msg : "我是支付页面",
            activeVip : "activeVip",
            activeName: this.$route.params.vip||'currencyRecharge',//切换页
            stretch : true,
            // pay:"wxpay",//支付方式
            miniActive : "wxpay",
            style:{//弹窗的位置
                top: "300px",
                left: "600px"
            },
            maskShow:false,//微信支付弹窗
            quota:0,//应付金额
            quotaVip:298,//应付金额
            erweimaNmu : 60,//二维码倒计时
            timer : null,//二维码倒计时定时器
            timer2:null,//微信支付轮询
            invalid : false,//二维码失效
            coins : 0,//交易币数量
            vip:12,//vip月份
            erweimaText:"",
            type:"0",//0 交易币/  1VIP
            rechargeBtn:false,//立即充值按钮状态
        }
    },
    methods: {
        handleClick(tab, event) {
            // console.log(tab, event);
        },
        rechargeMode(msg){//支付方式
            this.miniActive = msg;
        },
        move(e){//弹出框拖拽
	      let odiv = e.target.parentNode;    //获取目标元素
	       
	      //算出鼠标相对元素的位置
	      let disX = e.clientX - odiv.offsetLeft;
	      let disY = e.clientY - odiv.offsetTop;
	      document.onmousemove = (e)=>{    //鼠标按下并移动的事件
	        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
	        let left = e.clientX - disX;  
	        let top = e.clientY - disY;
	         
	        //绑定元素位置到positionX和positionY上面
	        this.positionX = top;
	        this.positionY = left;
	         
	        //移动当前元素
	        odiv.style.left = left + 'px';
	        odiv.style.top = top + 'px';
	      };
	      document.onmouseup = (e) => {
	        document.onmousemove = null;
	        document.onmouseup = null;
	      };
        },
        rechargeMaskClose(){//关闭微信支付弹窗
            this.maskShow = false;
            this.invalid = false;
            this.erweimaNmu = 60;
            this.rechargeBtn= false;//关闭弹窗可以点击
            clearInterval(this.timer);
            $("#qrcode").html("")
            this.erweimaText="";
        },
        refreshBtn(){//刷新二维码
        var This = this;
            this.invalid = false;
            $("#qrcode").html("");
            this.erweimaText="";
            var formData = {
                    "paytype" : "1",//支付类型(0支付宝1微信)
                    "type":this.type,//0 交易币/  1VIP
                }
                if(this.type=='0'){
                    formData.coins = this.coins;
                }else if(this.type=='1'){
                    formData.vip = this.vip;
                }
            axios.post("/pay",formData).then(response=>{
                    this.maskShow = true; 
                    this.qrcode(183,183,response.data.code_url)
                    This.timer = setInterval(function(){//微信支付生成二维码
                                This.erweimaNmu--;
                                if(This.erweimaNmu==0){
                                    clearInterval(This.timer);
                                    This.erweimaNmu=60;
                                    This.invalid = true;
                                    This.erweimaText = "二维码已失效，请刷新重试"
                                }
                        },1000)
                        this.paymentResults(response.data.out_trade_no)
                }).catch(error=>{
                    console.log(error.response,"失败")
                })
        },
        errorWarning(msg) {//错误提示
            this.$message({
                message: msg,
                type: 'error',
                customClass : "sucPoint",
                duration : 1000,
                showClose : true
            });
        },
        ImmediateRecharge(type){//立即充值按钮
            this.rechargeBtn = true;//点击一次以后就禁止点击
            var This = this;
            this.type=type;
            this.invalid = false;
            var vipCoins = null;//判断是开通vip还是交易币
            if(type==0){
                vipCoins = this.quota;//交易币
                $("#rechargeNum").html(this.quota);
            }else if(type==1){
                vipCoins = this.quotaVip;//vip
                $("#rechargeNum").html(this.quotaVip);
            };
            if(!vipCoins){
                this.errorWarning("请选择充值数量或输入充值数量");
                this.rechargeBtn= false;//条件不可以支付允许点击
            }else if(this.miniActive=="wxpay"){
                this.erweimaPosition();
                this.maskShow = true; 
                var formData = {
                    "paytype" : "1",//支付类型(0支付宝1微信)
                    "type":this.type,//0 交易币/  1VIP
                }
                if(type==0){
                    formData.coins = this.coins;
                }else if(type==1){
                    formData.vip = this.vip;
                }
                axios.post("/pay",formData).then(response=>{
                    this.rechargeBtn= false;//请求成功了可以继续点击
                    this.qrcode(183,183,response.data.code_url)
                    This.timer = setInterval(function(){//微信支付生成二维码
                        This.erweimaNmu--;
                        if(This.erweimaNmu==0){
                            clearInterval(This.timer);
                            This.erweimaNmu=60;
                            This.invalid = true;
                            This.erweimaText = "二维码已失效，请刷新重试"
                        }
                    },1000)
                    this.paymentResults(response.data.out_trade_no)
                }).catch(error=>{
                    console.log(error.response,"失败")
                })
            }else if(this.miniActive=="alipay"){
                
                var formData = {
                    "paytype" : "0",//支付类型(0支付宝1微信)
                    "type":type,//0 交易币/  1VIP
                }
                if(type==0){
                    formData.coins = this.coins;
                }else if(type==1){
                    formData.vip = this.vip;
                }
                axios.post("/pay",formData).then(response=>{
                    $("body").html(response.data)
                }).catch(error=>{
                    console.log(error.response)
                })
            }
            
        },
        paymentResults(orderNumber){//请求查询微信支付状态
            clearInterval(this.timer2);
            var over = 60;
            var This = this;
            this.timer2 = setInterval(function(){
                over-=6;
                axios.get("/pay/wxpayreturn/"+orderNumber).then(response=>{
                    //支付成功要做的事
                    if(response.data.status=="1"){
                        clearInterval(This.timer2);
                        This.$router.push("/userCore")
                    }
                })
                if(over<=0){
                    clearInterval(This.timer2);
                }
            },6000)
        },
        quotaActual(money,coins){//充值金额
            this.quota = money;
            this.coins = coins;
        },
        quotaActualVip(money,month){//充值金额
            this.quotaVip = money;
            this.vip = month;
        },
        qrcode (width,height,url) {//生成二维码
            $("#qrcode").html("");
            let qrcode = new QRCode('qrcode', {
                "width": width,
                "height": height, // 高度
                "text": url, // 二维码内容
                "render": 'table'
            })
        },
        erweimaPosition(){//二维码弹窗位置
            this.style.left = ($(window).width()-330)/2+"px";
            this.style.top = ($(window).height()-330)/2+"px";
        }
        
    },
    components:{
        loading,
        searchTitle : resolve => require(["../searchTitle/searchTitle"], resolve),//搜索头部
        currencyRecharge : resolve => require(["./currencyRecharge"], resolve),//交易币充值
        vipRecharge : resolve => require(["./vipRecharge"], resolve),//vip充值
        rechargeMode : resolve => require(["./rechargeMode"], resolve),//支付方式
    },
    computed: {
        ...mapState({//登录的用户信息
            user: state => state.AuthUser
        }),
        mismatchError() {
            return this.bag.has('password:auth') && !this.errors.has('password')
        },
           
        
    },
    metaInfo: {
      title: '集设网_会员充值', // set a title
    }
}
</script>
<style>
.recharge{
    padding-top:71px;
}
.WeChatBox,.AlipayBox{
    position: relative;
}
.WeChatBox .rechargeActive{
    width: 38px!important;
    height: 25px!important;
    position: absolute;
    right: 5px;
    bottom: -9px;
}
.AlipayBox .rechargeActive{
    width: 38px!important;
    height: 25px!important;
    position: absolute;
    right: 1px;
    bottom: -9px;
}
.recharge{
    background: #fff;
    margin-bottom: 34px;
    margin-top: 20px;
}
.recharge .el-tabs__item{
    font-size: 20px;
    line-height: 80px;
    color: #333333;
    font-weight: bold;
    height: 80px;
    /* padding-left: 20px!important;
    padding-right: 20px!important; */
}
.recharge .el-tabs__active-bar{
    background-color: #ea514b;
}
.recharge .el-tabs__item.is-active{
    color: #ea514b;
}
.recharge .el-tabs__nav-scroll{
    /* width: 300px; */
    padding-right: 800px;
    padding-left:30px;
    border-bottom: 3px solid #dddddd;
}
/* .rcaTitle{
    font-size: 20px;
    line-height: 80px;
    font-weight: 300;
    padding-left: 38px;
} */
.rcaUser{
    font-size: 18px;
    line-height: 70px;
    font-weight: 200;
}
.racItem{
    margin-top: 19px;
}
.rcaBox{
    padding-left: 38px;
    padding-right: 38px;
}
.rcaBalance{
    font-size: 18px;
    line-height: 38px;
    font-weight: 200;
}
.openVip{
    color: #ec615c;
    margin-left: -6px;
}
.rcaNum{
    float: left;
    width: 124px;
    font-size: 18px;
    line-height: 28px;
}
.rcaListBox{
    float: left;
    font-weight: 200;
}
.rcaListBox li{
    float: left;
    margin-right: 16px;
    width: 157px;
    height:97px;
    border: 1px solid #dddddd;
    background: #f3f3f3;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    color: #666;
    padding-top: 22px;
    box-sizing: border-box;
    cursor: pointer;
}
.rcaListBox li:hover{
    border-color: #ea514b;
}
.otherNum{
    padding-left: 125px;
}
.otherNumBtn button{
    border: none;
    outline: none;
    background: transparent;
    font-size: 18px;
    line-height: 54px;
    color: #ea514b;
}
.otherMsg input{
    width: 324px;
    height: 38px;
    border: 1px solid #ddd;
    padding: 0;
    padding-left: 6px;
    font-size: 14px;
    line-height: 38px;
    background-color: #f4f4f4;
    outline: none;
}
.otherMsg p{
    font-size: 14px;
    line-height: 32px;
    color: #818181;
}
.paymentMode span{
    font-size: 18px;
    line-height: 42px;
    color: #333333;
    vertical-align: top;
}
.paymentMode img{
    width: 165px;
    height: 42px;
    margin-right: 13px;
}
.openVipNow{
    font-size: 18px;
    line-height: 38px;
    color: #333;
}
.paymentText{
    display: inline-block;
    width: 115px;
}
.noVip,.yesVip{
    display: inline-block;
    position: relative;
    /* width: 21px; */
    padding-left: 25px;
}
.noVip input,.yesVip input{
    position: absolute;
    top: 9px;
    left: 0;
    z-index: 9;
    opacity: 0;
}
.noVip i,.yesVip i{
    position: absolute;
    top: 9px;
    left: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../../img/random.png) no-repeat;
}
.activeVip{
    background: url(../../img/randomR.jpg) no-repeat!important;
}
.paymentNum{
    margin-top: 6px;
    margin-bottom: 24px;
}
.paymentNum span{
    font-size: 18px;
    line-height: 44px;
    color: #333;
}
.paymentNum .paymentNumMsg{
    color: #e06862;
    margin-left: 3px;
}
.rechargeBtn{
    padding-left: 122px;
    margin-top: 35px;
    padding-bottom: 33px;
    border-bottom: 1px solid #ddd;
}
.rechargeBtn button{
    width: 186px;
    height: 40px;
    border: none;
    padding: 0;
    background: #ea514b;
    color: #fff;
    font-size: 16px;
    line-height: 40px;
    outline: none;
}
.rcaExplain{
    font-size: 18px;
    line-height: 46px;
    color: #333;
    margin-top: 8px;
}
.explainBox{
    padding-left: 107px;
    padding-bottom: 60px;
}
.explainBox li{
    padding-left: 21px;
    font-size: 14px;
    line-height: 30px;
    color: #333;
    background: url(../../img/spot.png) no-repeat center left;
}
.moneyActive{
    color: #fff!important;
    background: #ea514b!important;
}
.rechargeMask{
    position: fixed;
    top: 0;
    left: 0;
    z-index:99;
    width: 100%;
    height: 100%;
    background: rgba(0, 0,0,.6)
}
.rechargeMaskBox{
    width: 330px;
    height: 330px;
    background: #fff;
    position: absolute;
}
.rechargeMaskTitle{
    font-size: 18px;
    line-height: 38px;
    color: #ea514b;
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
}
.rechargeMaskScanning{
    font-size: 14px;
    line-height: 30px;
    color: #232323;
    text-align: center;
}
.rechargeMaskClose{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 9;
    font-size: 20px;
    width: 25px;
    height: 25px;
}
.erweimaCountdown{
    width: 100%;
    font-size: 14px;
    line-height: 42px;
    color: #8a8a8a;
    text-align: center;
    position: absolute;
    bottom: 2px;
}
.rechargeErweima{
    width: 185px;
    height: 185px;
    /* border: 1px solid red; */
    margin: 0 auto;
    position: relative;
}
.erweimaInvalid{
    position:absolute;
    width: 100%;
    height: 100%;
    top:0;
    font-size: 14px;
    color: #333;
    line-height: 180px;
    text-align: center;
}
.erweimaInvalid button{
    width: 72px;
    font-size: 16px;
    line-height: 30px;
    border-radius: 4px;
    position: absolute;
    top: 110px;
    left: 56px;
    outline: none;
    border: none;
    background: #ea514b;
    color: #fff;
}    
.erweimaMask{
    background: rgba(255, 255,255,.95)
}
.rechargeErweima #qrcode{
    width: 100%;
    height: 100%;
}
.drag{
    position: absolute;
    width: 100%;
    height: 20px;
    left: 0;
    top: 0;
    cursor: pointer;
    z-index:99;
}
.sucPoint{
    position: fixed;
    top: 25%;
    font-size: 50px;
}
.AlipayBox,.WeChatBox{
    cursor: pointer;
}
.recharge .el-tabs__header{
    margin-bottom: 0;
}
</style>
